<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .my_grid{
            height: 600px;
            display: grid;
            grid:
                "header header" 50px
                "left content" 1fr
                "floor floor" 100px
                / 1fr 5fr;
            gap: 16px 16px;
        }
        #header{
            grid-area: header;
            background: rgb(163, 98, 98);
        }
        #left {
            grid-area: left;
            background: rgba(102, 172, 160, 0.644);
        }
        #content{
            padding: 10px;
            grid-area: content;
            background: rgba(132, 228, 119, 0.644);
            display: grid;
            grid:
                ". c_header" 50px
                "c1 c2" auto
                "c3 c3" auto
                / 1fr 5fr;
            gap: 5px 5px;
        }
        #content .c_header{
            grid-area: c_header;
        }
        #content .c1{
            grid-area: c1;
            background: rgba(65, 180, 180, 0.644);
        }
        #content .c2{
            grid-area: c2;
            background: rgba(65, 180, 180, 0.644);
        }
        #content .c3{
            grid-area: c3;
            background: rgba(65, 180, 180, 0.644);
        }
        #floor{
            grid-area: floor;
            background: rgb(156, 163, 98);
        }
    </style>
</head>
<body>
    <div class="my_grid">
        <div id="header">1</div>
        <div id="left">2</div>
        <div id="content">
            <div class="c_header">你好哇</div>
            <div class="c1">c1</div>
            <div class="c2">c2</div>
            <div class="c3">c3</div>
        </div>
        <div id="floor">4</div>
    </div>
</body>
</html>